@charset "utf-8";
*{
	margin: 0;
	padding:0;
	font-family: "华文彩云";
	font-size: 50px;
	color: #c81264;
}
body{
	background:url(../img/客厅加桥.jpg);
	background-size: 100% 819px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	}
.tutu{
	width:150px;
	height:200px;
	background: url(../img/反滑板图图.png );
	background-size: 100% 100%;
	position: relative;
	top:390px;
	left:256px;
	animation: tutu 4s linear infinite;
}
@keyframes tutu{
	    0%{
	  		top:390px;
	  		left:256px;
	    		}
	    35%{
	  		top:259px;
	  		left:445px;
	  		background:url(../img/反滑板图图.png);
	  		background-size: 100% 100%;
	  		transform: rotate(-30deg);
	  			}
	  	50%{
	  		top:236px;
	  		left:599px;
	  		background:url(../img/反滑板图图.png);
	  		background-size: 100% 100%;
	  		transform: rotate(0deg);
	  		}
	  	65%{
			top:296px;
			left:856px;
			background:url(../img/反滑板图图.png);
			background-size: 100% 100%;
		    transform: rotate(30deg);
				}
		70%{
		    top:296px;
		    left:856px;
		    background:url(../img/滑板图图.png);					
	    	background-size: 100% 100%;	
		    transform: rotate(0deg);
			}
		80%{
			top:390px;
			left:256px;
			background:url(../img/滑板图图.png);
			background-size: 100% 100%;
            }
	}
.xiaoli{
	width:289px;
	height:345px;
	background: url(../img/张小丽2.png );
	background-size: 100% 100%;
	position: relative;
	top:203px;
	left:-57px;
	animation: xiaoli 4s linear infinite;
	}
@keyframes xiaoli{
		0%{
			top:203px;
			left:-57px;
			}
        50%{
			top:183px;
			left:-57px;
			background:url(../img/张小丽2.png);
			background-size: 100% 100%;
			}
		75%{
			top:203px;
			left:-57px;
			background:url(../img/张小丽2.png);
			background-size: 100% 100%;
			}
		100%{
			top:183px;
			left:-57px;
			background:url(../img/张小丽2.png);
			background-size: 100% 100%;
			}
	}
.hua{
	width:154px;
	height:151px;
	background: url(../img/话.png);
	background-size: 100% 100%;
	position: relative;
	top:-133px;
	left:129px;
	animation: hua 5s linear infinite;
}
@keyframes hua{
	0%{
		top:-133px;
		left:129px;
	}
	50%{
		top:-157px;
		left:129px;
		background: url(../img/话.png );
		background-size: 100% 100%;
		
	}
	100%{
		top:-133px;
		left:129px;
		background:url(../img/话.png);
		background-size: 100% 100%;
	}
	}
.yingjun{
	width:289px;
	height:345px;
	background: url(../img/胡英俊.png );
	background-size: 100% 100%;
	position: relative;
	top:-292px;
	left:1018px;
	animation: yingjun 4s linear infinite;
	}
@keyframes yingjun{
		0%{
			top:-292px;
			left:1018px;
			}
		40%{
			top:-276px;
			left:1018px;
			background:url(../img/胡英俊.png);
			background-size: 100% 100%;
			}
		80%{
			top:-292px;
			left:1018px;
			background:url(../img/胡英俊.png);
			background-size: 100% 100%;
		}
		100%{
			top:-276px;
			left:1018px;
			background:url(../img/胡英俊.png);
			background-size: 100% 100%;
			}
		}
.bahua{
	width:187px;
	height:134px;
	background: url(../img/爸话.png);
	background-size: 100% 100%;
	position: relative;
	top:-679px;
	left:1203px;
	animation: bahua 4s linear infinite;
}
@keyframes bahua{
	0%{
		top:-679px;
		left:1203px;
	}
	30%{
		top:-674px;
		left:1204px;
		background: url(../img/爸话.png);
		background-size: 100% 100%;
	}
	45%{
		top:-679px;
		left:1203px;
		background: url(../img/爸话.png);
		background-size: 100% 100%;
	}
	60%{
		top:-674px;
		left:1204px;
		background: url(../img/爸话.png);
		background-size: 100% 100%;
	}
	75%{
		top:-679px;
		left:1203px;
		background: url(../img/爸话.png);
		background-size: 100% 100%;
	}
	100%{
		top:-674px;
		left:1203px;
		background: url(../img/爸话.png);
		background-size: 100% 100%;
	}
}
.parent-container{
	position:relative;
}
.xiaoguai{
	width:90px;
	height:61px;
	background: url(../img/1.png);
	background-size: 100% 100%;
	position: absolute;
	top:-534px;
	left:326;
	z-index: 10;
	animation: xiaoguai 2s steps(1) infinite;
    }
	.xiaoguai::after {
    content: "小怪也喜欢图图💕"; 
    position: absolute;
    top: -30px;
    left: 50px;
    background: #c891c7;
    color: #c82c84; 
    padding: 5px 10px;
    border-radius: 4px;
	font-family: "黑体";
    font-size: 12px;
    white-space: nowrap;
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease; 
    z-index: 11;
}
.xiaoguai:hover::after{
	opacity: 1;
	visibility: visible;
}
.xiaoguai:hover{
	animation-play-state: paused;
	}
.text-color {
	width:200px;
	height:200px;
	font-family: "黑体";
    font-size: 15px;
    animation: text-color 2s steps(2) infinite; 
	position:absolute;
	top:-534px;
	left:195px;
	
}
.parent-container:hover .xiaoguai,
.parent-container:hover .text-color{
	animation-play-state: paused;
}
@keyframes xiaoguai {
  0% {
    top:-534px;
	left:326px;
    background: url(../img/1.png);
    background-size: 92px 61px;
  }
  7% {
    top:-534px;
    left:356px;
    background: url(../img/2.png);
    background-size: 92px 61px;
  }
  14% {
    top:-534px;
    left:386px;
    background: url(../img/3.png);
    background-size: 92px 61px;
  }
  21% {
    top:-534px;
    left:416px;
    background: url(../img/4.png);
    background-size: 92px 61px;
  }
  28% {
   top:-534px;
   left:446px;
    background: url(../img/5.png);
    background-size: 92px 61px;
  }
  35% {
    top:-534px;
    left:476px;
    background: url(../img/6.png);
    background-size: 92px 61px;
  }
  42% {
    top:-534px;
    left:506px;
    background: url(../img/7.png);
    background-size: 92px 61px;
  }
  49% {
    top:-534px;
    left:536px;
    background: url(../img/8.png);
    background-size: 92px 61px;
  }
  56% {
    top:-534px;
    left:566px;
    background: url(../img/9.png);
    background-size: 92px 61px;
  }
  63% {
   top:-534px;
   left:596px;
    background: url(../img/10.png);
    background-size: 92px 61px;
  }
  70% {
   top:-534px;
   left:626px;
    background: url(../img/11.png);
    background-size: 92px 61px;
  }
  77% {
    top:-534px;
    left:656px;
    background: url(../img/12.png);
    background-size: 92px 61px;
  }
  84% {
    top:-534px;
	left:686px;
    background: url(../img/13.png);
    background-size: 92px 61px;
  }
  91% {
    top:-534px;
    left:716px;
    background: url(../img/14.png);
    background-size: 92px 61px;
  }
}

@keyframes text-color {
  0% {
    top:-534px;
    left:195px;
    font-size: 15px;
  }
  7% {
    top:-534px;
    left:225px;
    color: #c80b44;
    font-size: 15px;
  }
  14% {
    top:-534px;
	left:255px;
    color: #c84ca7;
    font-size: 15px;
  }
  21% {
    top:-534px;
    left:285px;
    color: #c89bbb;
    font-size: 20px;
  }
  28% {
    top:-534px;
    left:315px;
    color: #c8c1c4;
    font-size: 15px;
  }
  35% {
    top:-534px;
    left:345px;
    color: #8004c8;
    font-size: 15px;
  }
  42% {
   top:-534px;
   left:375px;
    color: #b12cc8;
    font-size: 15px;
  }
  49% {
    top:-534px;
    left:405px;
    color: #925bc8;
    font-size: 20px;
  }
  56% {
    top:-534px;
    left:435px;
    color: #9177c8;
    font-size: 15px;
  }
  63% {
    top:-534px;
    left:465px;
    color: #a7b8c8;
    font-size: 15px;
  }
  70% {
    top:-534px;
    left:495px;
    color: #71a2c8;
    font-size: 15px;
  }
  77% {
    top:-534px;
    left:525px;
    color: #4fc8ba;
    font-size: 20px;
  }
  84% {
   top:-534px;
   left:555px;
    color: #2cc899;
    font-size: 15px;
  }
  91% {
    top:-534px;
    left:585px;
    color: #0bc80b;
    font-size: 20px;
  }
}
.zhongbiao{
	width:250px;
	height:250px;
	background: url(../img/01.png)no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:41px;
	left:1036px;
	animation: zhongbiao 2s steps(1) infinite;
	opacity: 0.2;
}
@keyframes zhongbiao{
	0%{
		top:41px;
		left:1036px;
	}
	
	10%{
		top:41px;
		left:1036px;
		background: url(../img/06.png);
		background-size: 100% 100%;
	}
	
	20%{
		top:41px;
		left:1036px;
		background: url(../img/011.png);
		background-size: 100% 100%;
	}
	
	30%{
		top:41px;
		left:1036px;
		background: url(../img/016.png);
		background-size: 100% 100%;
	}
	
	40%{
		top:41px;
		left:1036px;
		background: url(../img/022.png);
		background-size: 100% 100%;
	}
    50%{
		top:41px;
		left:1036px;
		background: url(../img/027.png);
		background-size: 100% 100%;
	}
	
	60%{
		top:41px;
		left:1036px;
		background: url(../img/033.png);
		background-size: 100% 100%;
	}
	
	70%{
		top:41px;
		left:1036px;
		background: url(../img/039.png);
		background-size: 100% 100%;
	}
	
	80%{
		top:41px;
		left:1036px;
		background: url(../img/046.png);
		background-size: 100% 100%;
	}
	80%{
		top:41px;
		left:1036px;
		background: url(../img/047.png);
		background-size: 100% 100%;
	}
    
	90%{
		top:41px;
		left:1036px;
		background: url(../img/053.png);
		background-size: 100% 100%;
	}
	
	100%{
		top:41px;
		left:1036px;
		background: url(../img/060.png);
		background-size: 100% 100%;
	}
	}.cat{
		width:100px;
		height:100px;
		background: url(../img/001.jpg)no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top:714px;
		left:1316px;
		animation: cat 2s linear infinite;
	}
	@keyframes cat{
		0%{
			top:714px;
			left:1316px;
		}
		10%{

			background: url(../img/002.jpg)no-repeat;
			background-size: 100% 100%;
		}20%{

			background: url(../img/003.jpg)no-repeat;
			background-size: 100% 100%;
		}30%{

			background: url(../img/004.jpg)no-repeat;
			background-size: 100% 100%;
		}40%{

			background: url(../img/005.jpg)no-repeat;
			background-size: 100% 100%;
		}50%{

			background: url(../img/006.jpg)no-repeat;
			background-size: 100% 100%;
		}60%{

			background: url(../img/007.jpg)no-repeat;
			background-size: 100% 100%;
		}70%{

			background: url(../img/008.jpg)no-repeat;
			background-size: 100% 100%;
		}80%{

			background: url(../img/009.jpg)no-repeat;
			background-size: 100% 100%;
		}90%{

			background: url(../img/0010.jpg)no-repeat;
			background-size: 100% 100%;
		}100%{

			background: url(../img/0011.jpg)no-repeat;
			background-size: 100% 100%;
		}
	}

